<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: violet;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div></div>
<script>
    let divs = document.querySelector("div")
    divs.onmousedown = function (e) {
        let downE = e || window.event;
        console.log(111)
        document.onmousemove = function (e) {
            let moveE = e || window.event;
            let x = moveE.pageX - downE.offsetX
            let y = moveE.pageY - downE.offsetY
            // 判断这个y 不能等于负数
            if (y < 0) y = 0
            if (x < 0) x = 0
            // 右下 的边距不能超出
            if (y > document.documentElement.clientHeight - divs.offsetHeight) {
                y = document.documentElement.clientHeight - divs.offsetHeight
            }
            if (x > document.documentElement.clientWidth - divs.offsetWidth) {
                x = document.documentElement.clientWidth - divs.offsetWidth
            }
            divs.style.left = x + "px"
            divs.style.top = y + "px"
        }

        document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
        }
    }

</script>
</body>
</html>